<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" :append-to-body="true" title="设备详情" width="60%" :before-close="handleClose" top="200px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" label-width="">
        <div class="flex item-box" v-for="(item,index) in mobileData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80">
            <el-form-item class="item-clear">
              <span> {{item.value}} </span>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { 
  getMobile
 } from "@/api/agent";
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      formParams:{},
      mobileData:[
        {label:'mac码',key:'mac',value:""},
        {label:'手机型号',key:'model',value:""},
        {label:'系统',key:'os',value:""},
        {label:'系统版本',key:'osver',value:""},
        {label:'游戏系统版本',key:'appver',value:""},
        {label:'设备ID',key:'device_id',value:""},
      ]
    }
  },
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.getDetailsList(that.data.id)
      }
    },
  },
  mounted () {},
  methods: {
    // 设备信息
    getDetailsList (id) {
      let that = this;
      getMobile({user_id:id}).then(function (res) {
        if (res.data) {
          let params=res.data[0].device_info_details;
          for (const key in params) {
            that.mobileData.map(item=>{
              if(key==item.key){
                item.value=params[key]
              }
            })
          }
        }
      })
      .catch((error) => {
        that.$message.error(error.msg);
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
</style>